<template>
	<div>
		<div class="shelves-filter-wrap">
			<span class="shelves-input-item">
				<label>订单单号：</label>
				<span>
					<input type="text" placeholder="请输入订单编号" v-model="condition.orderSn" />
				</span>
			</span>
			<span class="shelves-input-item">
				<label>收票人：</label>
				<span>
					<input type="text" placeholder="请输入收票人姓名" v-model="condition.linkMan" />
				</span>
			</span>
			<span class="shelves-input-item order-range-time">
				<label>下单时间：</label>
				<span>
					<el-date-picker
				      v-model="value7"
				      type="daterange"
				      align="right"
				      placeholder="选择日期范围"
				      @change="setTime"
				      :picker-options="pickerOptions2">
				    </el-date-picker>
				</span>
			</span>
			<span class="shelves-input-item" style="margin-top: 15px;">
				<label>商品名称：</label>
				<span>
					<input type="text" placeholder="请输入商品名称" v-model="condition.goodName"/>
				</span>
			</span>
			<span class="shelves-input-item">
				<label>手机号：</label>
				<span>
					<input type="text" placeholder="请输入收票人手机号码" v-model="condition.mobile"/>
				</span>
			</span>
			<span class="shelves-input-item margin-right-15">
				<label>状态：</label>
				<span>
					<select class="shelves-input-select" v-model="condition.billIsOpenedApp">
						<option value="">全部</option>
						<option value="0">未开发票</option>
						<option value="1">已开发票</option>
					</select>
				</span>
			</span>
			<span>
				<span class="shelves-filter-btn-default shelves-filter" v-on:click="init">查询</span>
				<span class="shelves-filter-btn-default shelves-cancel" v-on:click="clearCondition">取消</span>
			</span>
		</div>
		<div>
			<table class="shelves-table">
				<thead>
					<tr>
						<!-- <th class="table-header-selectall">全选</th> -->
						<th>商品信息</th>
						<th>开票金额</th>
						<th>收票人</th>
						<th>发票抬头</th>
						<th>收票人电话</th>
						<th>税号</th>
						<th>发票种类</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody class="order-tbody" v-for="item in receiptData">
					<tr>
						<td colspan="9" class="self-tbody-space"></td>
					</tr>
					<tr>
						<td colspan="9" class="shelves-table-block-title no-select">
							<span>订单编号：{{item.orderSn}}</span>
							<span>下单时间：{{item.createTime}}</span>
						</td>
					</tr>
					<tr class="order-table-item" v-for="list in item.listDetail">
						<!-- <td class="table-receipt-image"> -->
						<td class="table-receipt-goodsInfo">
							<div class="table-receipt-goodsInfo-image">
								<img :src="imgAddress + list.navigateImg1"  @error="error(1)"/>
							</div>
							<div>
								<div class="order-goods-name">{{list.goodName}}</div>
								<div class="order-default-font order-guige">{{list.specName}}</div>
								<div class="order-default-font order-guige">SKU：{{list.productBn}}</div>
							</div>										
						</td>											
						<!-- <td class="table-receipt-info">
							<div>
								<div class="order-goods-name">{{list.goodName}}</div>
								<div class="order-default-font order-guige">{{list.specName}}</div>
								<div class="order-default-font order-guige">SKU：{{list.productBn}}</div>
							</div>
						</td> -->
						<td class="order-default-font">¥{{list.openBillFeeApp/100}}</td>
						<td class="order-default-font">{{list.linkMan}}</td>
						<td>
							<div>{{list.billHeader}}</div>
						</td>
						<td>
							<div>{{list.mobile}}</div>
						</td>
						<td>
							<div>{{list.taxNumber}}</div>
						</td>
						<td>
							<div v-if="list.openBillTypeApp == 0">无</div>
							<div v-else-if="list.openBillTypeApp == 1">3%小额</div>
							<div v-else-if="list.openBillTypeApp == 2">6%服务发票</div>
							<div v-else>17%增值税发票</div>
						</td>
						<td class="table-receipt-status">
							<div class="font-color-red" v-if="list.billIsOpenedApp == 0">未开</div>
							<div class="font-color-green" v-else>已开</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="block">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="condition.pageNum" :total="total" :page-size="10"></el-pagination>
		</div>
	</div>
</template>
<script>
	import store from '../store/index.js'
	import {receiptInfo, imgAddress} from '../config/interface.js'
	import {toast, imageError} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'

	export default {
		data(){
			return {
				pickerOptions2: {
		          	shortcuts: [{
			            text: '最近一周',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			              picker.$emit('pick', [start, end]);
			            }
		          	}, {
			            text: '最近一个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			              picker.$emit('pick', [start, end]);
			            }
		          	}, {
			            text: '最近三个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			              picker.$emit('pick', [start, end]);
			            }
		          	}]
		        },
		        value7: '',
				condition: {
					billIsOpenedApp: 0,
					endTime: '',
					goodName: '',
					linkMan: '',
					mobile: '',
					orderSn: '',
					startTime: '',
					userId: store.state.userId,
					pageSize: 10,
					pageNum: 1
				},
				receiptData: {},
				imgAddress: imgAddress,
				pageCount: '',
		        total: 0
			}
		},
		mounted(){
			this.init();
		},
		methods: {
			error(num){
				imageError(num, event);
			},
			init(){
				var data = this.condition;
				var url = receiptInfo;
				fetch(url, data)
				.then(res => {
					this.pageCount = res.data.pageCount;
					this.total = res.data.count;
					this.receiptData = res.data.list;
				})
			},
			fenye(){
				var data = this.condition;
				var url = receiptInfo;
				fetch(url, data)
				.then(res => {
					this.receiptData = res.data.list;
				})
			},
			clearCondition(){
				this.condition.billIsOpenedApp = 0;
				this.condition.endTime = '';
				this.condition.goodName = '';
				this.condition.linkMan = '';
				this.condition.mobile = '';
				this.condition.orderSn = '';
				this.condition.startTime = '';
				this.init()
			},
			setTime(val){
				this.condition.startTime = val.substring(0, 10);
				this.condition.endTime = val.substring(13, 23);
			},
			handleCurrentChange(val) {
		        this.condition.pageNum = val;
		        this.fenye();
		    },
		}
	}
</script>
<style>

</style>